function All() { }
All.prototype = {
    timer: "",
    debounce(fn, delay = 500) {
        var _this = this;
        return function (arg) {
            //获取函数的作用域和变量
            let that = this;
            let args = arg;
            clearTimeout(_this.timer) // 清除定时器
            _this.timer = setTimeout(function () {
                fn.call(that, args)
            }, delay)
        }
    },
    arrToStr(arr) {
        if (arr) {
            return arr.map(item => item.name).toString()
        }
    },
    toggleClass(arr, elem, key = 'id') {
        return arr.some(item => item[key] == elem[key]);
    },
    toChecked(arr, elem, key = 'id') {
        var isIncludes = this.toggleClass(arr, elem, key);
        !isIncludes ? arr.push(elem) : this.removeEle(arr, elem, key);
    },
    removeEle(arr, elem, key = 'id') {
        var includesIndex;
        arr.map((item, index) => {
            if (item[key] == elem[key]) {
                includesIndex = index
            }
        });
        arr.splice(includesIndex, 1);
    },
    setApproverStr(nodeConfig) {
        if (nodeConfig.settype == 1) {
            if (nodeConfig.nodeUserList.length == 1) {
                return nodeConfig.nodeUserList[0].name
            } else if (nodeConfig.nodeUserList.length > 1) {
                if (nodeConfig.examineMode == 1) {
                    return this.arrToStr(nodeConfig.nodeUserList)
                } else if (nodeConfig.examineMode == 2) {
                    return nodeConfig.nodeUserList.length + "人会签"
                }
            }
        } else if (nodeConfig.settype == 2) {
            if (nodeConfig.selectRange == 1) {
                return "发起人自选"
            } else {
                if (nodeConfig.nodeUserList.length > 0) {
                    if (nodeConfig.selectRange == 2) {
                        return "发起人自选"
                    } else {
                        return '发起人从' + nodeConfig.nodeUserList[0].name + '中自选'
                    }
                } else {
                    return "";
                }
            }
        } else if (nodeConfig.settype == 3) {
            return "发起人自己"
        }
    },
    dealStr(str, obj) {
        let arr = [];
        let list = str.split(",");
        for (var elem in obj) {
            list.map(item => {
                if (item == elem) {
                    arr.push(obj[elem].value)
                }
            })
        }
        return arr.join("或")
    },
    conditionStr(nodeConfig, index) {
        var { conditionList, nodeUserList } = nodeConfig.conditionNodes[index];
        if (conditionList.length == 0) {
            return (index == nodeConfig.conditionNodes.length - 1) && nodeConfig.conditionNodes[0].conditionList.length != 0 ? '其他条件进入此流程' : '请设置条件'
        } else {
            let str = ""
            for (var i = 0; i < conditionList.length; i++) {
                var { columnId, columnType, showType, showName, optType, zdy1, opt1, zdy2, opt2, fixedDownBoxValue } = conditionList[i];
                if (columnId == 0) {
                    if (nodeUserList.length != 0) {
                        str += '发起人属于：'
                        str += nodeUserList.map(item => item.name).join("或") + " 并且 "
                    }
                }
                if (columnType == "String" && showType == "checkBox") {
                    if (zdy1) {
                        str += showName + '属于：' + this.dealStr(zdy1, JSON.parse(fixedDownBoxValue)) + " 并且 "
                    }
                }
                if (columnType == "Double") {
                    if (optType != 6 && zdy1) {
                        var optTypeStr = ["", "<", ">", "≤", "=", "≥"][optType]
                        str += `${showName} ${optTypeStr} ${zdy1} 并且 `
                    } else if (optType == 6 && zdy1 && zdy2) {
                        str += `${zdy1} ${opt1} ${showName} ${opt2} ${zdy2} 并且 `
                    }
                }
            }
            return str ? str.substring(0, str.length - 4) : '请设置条件'
        }
    },
    copyerStr(nodeConfig) {
        if (nodeConfig.nodeUserList.length != 0) {
            return this.arrToStr(nodeConfig.nodeUserList)
        }
    },
    toggleStrClass(item, key) {
        let a = item.zdy1 ? item.zdy1.split(",") : []
        return a.some(item => item == key);
    },
}
const $func = new All();
//调用接口
const mixins = {
    data() {
        return {
            visibleDialog: false,
            searchVal: "",
            activeName: "1",
            departments: {},
            roles: [],
        }
    },
    methods: {
        getRoleList() {
            $.ajax({
                url: './json/roles.json',
                type: 'GET',
                success: ({ data: { list } }) => {
                    this.roles = list;
                },
                dataType: 'json'
            })

        },
        getDepartmentList() {
            $.ajax({
                url: `${DomainName}/getDepartmentsAction?token=${$.cookie('token')}`,
                type: 'POST',
                data: {
                    Enterprise_Info_SerialNumber: $.cookie('enterprise')
                },
                success: ({ data }) => {
                    this.departments = data;
                },
                complete: function (XMLHttpRequest) {
                    if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                        window.parent.document.location.href = absolutepath() + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                    }
                },
                dataType: 'json'
            })
        },
        getDebounceData(event, type = 1) {
            $func.debounce(async function () {
                if (event.target.value) {
                    let data = {
                        searchName: event.target.value,
                        pageNum: 1,
                        pageSize: 30
                    }
                    if (type == 1) {
                        this.departments.childDepartments = [];
                        $.ajax({
                            url: './json/employees.json',
                            type: 'GET',
                            data,
                            success: ({ data }) => {
                                this.departments.employees = data.list
                            },
                            dataType: 'json'
                        })
                    } else {
                        $.ajax({
                            url: './json/roles.json',
                            type: 'GET',
                            data,
                            success: ({ data }) => {
                                this.roles = data.list
                            },
                            dataType: 'json'
                        })
                    }
                } else {
                    type == 1 ? await this.getDepartmentList() : await this.getRoleList();
                }
            }.bind(this))()
        },
    }
}
//仓库
const store = new Vuex.Store({
    state: () => ({
        tableId: '',
        isTried: false,
        promoterDrawer: false,
        flowPermission1: {},
        approverDrawer: false,
        approverConfig1: {},
        copyerDrawer: false,
        copyerConfig1: {},
        conditionDrawer: false,
        conditionsConfig1: {
            conditionNodes: [],
        },
        Enterprise_Name: decodeURI($.cookie('useName'))
    }),
    mutations: {//commit调用
        setTableId(state, payload) {
            state.tableId = payload
        },
        setIsTried(state, payload) {
            state.isTried = payload
        },
        setPromoter(state, payload) {
            state.promoterDrawer = payload
        },
        setFlowPermission(state, payload) {
            state.flowPermission1 = payload
        },
        setApprover(state, payload) {
            state.approverDrawer = payload
        },
        setApproverConfig(state, payload) {
            state.approverConfig1 = payload
        },
        setCopyer(state, payload) {
            state.copyerDrawer = payload
        },
        setCopyerConfig(state, payload) {
            state.copyerConfig1 = payload
        },
        setCondition(state, payload) {
            state.conditionDrawer = payload
        },
        setConditionsConfig(state, payload) {
            state.conditionsConfig1 = payload
        },
    },
});
Vue.directive('focus', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el) {
        el.focus()
    }
});
Vue.component('nodeWrap', {
    template: `
    <div>
        <div class="node-wrap" v-if="nodeConfig.type<3">
            <div class="node-wrap-box" :class="(nodeConfig.type==0?'start-node ':'')+(isTried&&nodeConfig.error?'active error':'')">
                <div>
                    <div class="title" :style="'background: rgb('+bgColor+');'">
                        <span v-if="nodeConfig.type==0">{{nodeConfig.nodeName}}</span>
                        <template v-else>
                            <span class="iconfont">{{nodeConfig.type==1?'':''}}</span>
                            <input type="text" 
                                v-if="isInput"
                                class="ant-input editable-title-input" 
                                @blur="blurEvent()" 
                                @focus="$event.currentTarget.select()" 
                                v-focus
                                v-model="nodeConfig.nodeName" 
                                :placeholder="defaultText"
                            >
                            <span v-else class="editable-title" @click="clickEvent()">{{nodeConfig.nodeName}}</span>
                            <i class="anticon anticon-close close" @click="delNode"></i>
                        </template>
                    </div>
                    <div class="content" @click="setPerson">
                        <div class="text">
                            <span class="placeholder" v-if="!showText">请选择{{defaultText}}</span>
                            {{showText}}
                        </div>
                        <i class="anticon anticon-right arrow"></i>
                    </div>
                    <div class="error_tip" v-if="isTried&&nodeConfig.error">
                        <i class="anticon anticon-exclamation-circle"></i>
                    </div>
                </div>
            </div>
            <add-node :childNodeP.sync="nodeConfig.childNode"></add-node>
        </div>
        <div class="branch-wrap" v-if="nodeConfig.type==4">
            <div class="branch-box-wrap">
                <div class="branch-box">
                    <button class="add-branch" @click="addTerm">添加条件</button>
                    <div class="col-box" v-for="(item,index) in nodeConfig.conditionNodes" :key="index">
                        <div class="condition-node">
                            <div class="condition-node-box">
                                <div class="auto-judge" :class="isTried&&item.error?'error active':''">
                                    <div class="sort-left" v-if="index!=0" @click="arrTransfer(index,-1)">&lt;</div>
                                    <div class="title-wrapper">
                                        <input 
                                            v-if="isInputList[index]"
                                            type="text" 
                                            class="ant-input editable-title-input" 
                                            @blur="blurEvent(index)" 
                                            @focus="$event.currentTarget.select()" 
                                            v-focus v-model="item.nodeName"
                                        >
                                        <span  v-else class="editable-title" @click="clickEvent(index)">{{item.nodeName}}</span>
                                        <span class="priority-title" @click="setPerson(item.priorityLevel)">优先级{{item.priorityLevel}}</span>
                                        <i class="anticon anticon-close close" @click="delTerm(index)"></i>
                                    </div>
                                    <div class="sort-right" v-if="index!=nodeConfig.conditionNodes.length-1" @click="arrTransfer(index)">&gt;</div>
                                    <div class="content" @click="setPerson(item.priorityLevel)">{{$func.conditionStr(nodeConfig,index)}}</div>
                                    <div class="error_tip" v-if="isTried&&item.error">
                                        <i class="anticon anticon-exclamation-circle"></i>
                                    </div>
                                </div>
                                <add-node :childNodeP.sync="item.childNode"></add-node>
                            </div>
                        </div>
                        <node-wrap v-if="item.childNode" :node-config.sync="item.childNode"></node-wrap>
                        <template v-if="index==0">
                            <div class="top-left-cover-line"></div>
                            <div class="bottom-left-cover-line"></div>
                        </template>
                        <template v-if="index==nodeConfig.conditionNodes.length-1">
                            <div class="top-right-cover-line"></div>
                            <div class="bottom-right-cover-line"></div>
                        </template>
                    </div>
                </div>
                <add-node :childNodeP.sync="nodeConfig.childNode"></add-node>
            </div>
        </div>
        <node-wrap v-if="nodeConfig.childNode" :node-config.sync="nodeConfig.childNode"></node-wrap>
    </div>
    `,
    props: ['nodeConfig', 'flowPermission'],
    data() {
        return {
            placeholderList: ["发起人", "审批人", "抄送人"],
            isInputList: [],
            isInput: false,
        }
    },
    mounted() {
        if (this.nodeConfig.type == 1) {
            this.nodeConfig.error = !$func.setApproverStr(this.nodeConfig)
        } else if (this.nodeConfig.type == 2) {
            this.nodeConfig.error = !$func.copyerStr(this.nodeConfig)
        } else if (this.nodeConfig.type == 4) {
            this.resetConditionNodesErr()
        }
    },
    store,
    computed: {
        isTried() {
            return this.$store.state.isTried;
        },
        flowPermission1() {
            return this.$store.state.flowPermission1;
        },
        approverConfig1() {
            return this.$store.state.approverConfig1;
        },
        copyerConfig1() {
            return this.$store.state.copyerConfig1;
        },
        conditionsConfig1() {
            return this.$store.state.conditionsConfig1;
        },
        defaultText() {
            return this.placeholderList[this.nodeConfig.type]
        },
        showText() {
            if (this.nodeConfig.type == 0) return $func.arrToStr(this.flowPermission) || '所有人'
            if (this.nodeConfig.type == 1) return $func.setApproverStr(this.nodeConfig)
            return $func.copyerStr(this.nodeConfig)
        },
        bgColor() {
            return ['87, 106, 149', '255, 148, 62', '50, 150, 250'][this.nodeConfig.type]
        }
    },
    watch: {
        '$store.state.flowPermission1'(data) {
            if (data.flag && data.id === this._uid) {
                this.$emit('update:flowPermission', data.value)
            }
        },
        '$store.state.approverConfig1'(data) {
            if (data.flag && data.id === this._uid) {
                this.$emit('update:nodeConfig', data.value)
            }
        },
        '$store.state.copyerConfig1'(data) {
            if (data.flag && data.id === this._uid) {
                this.$emit('update:nodeConfig', data.value)
            }
        },
        '$store.state.conditionsConfig1'(data) {
            if (data.flag && data.id === this._uid) {
                this.$emit('update:nodeConfig', data.value)
            }
        }
    },
    methods: {
        clickEvent(index) {
            if (index || index === 0) {
                this.$set(this.isInputList, index, true)
            } else {
                this.isInput = true;
            }
        },
        blurEvent(index) {
            if (index || index === 0) {
                this.$set(this.isInputList, index, false)
                this.nodeConfig.conditionNodes[index].nodeName = this.nodeConfig.conditionNodes[index].nodeName || "条件"
            } else {
                this.isInput = false;
                this.nodeConfig.nodeName = this.nodeConfig.nodeName || this.defaultText
            }
        },
        delNode() {
            this.$emit("update:nodeConfig", this.nodeConfig.childNode);
        },
        addTerm() {
            let len = this.nodeConfig.conditionNodes.length + 1
            this.nodeConfig.conditionNodes.push({
                "nodeName": "条件" + len,
                "type": 3,
                "priorityLevel": len,
                "conditionList": [],
                "nodeUserList": [],
                "childNode": null
            });
            this.resetConditionNodesErr()
            this.$emit("update:nodeConfig", this.nodeConfig);
        },
        delTerm(index) {
            this.nodeConfig.conditionNodes.splice(index, 1)
            this.nodeConfig.conditionNodes.map((item, index) => {
                item.priorityLevel = index + 1
                item.nodeName = `条件${index + 1}`
            });
            this.resetConditionNodesErr()
            this.$emit("update:nodeConfig", this.nodeConfig);
            if (this.nodeConfig.conditionNodes.length == 1) {
                if (this.nodeConfig.childNode) {
                    if (this.nodeConfig.conditionNodes[0].childNode) {
                        this.reData(this.nodeConfig.conditionNodes[0].childNode, this.nodeConfig.childNode)
                    } else {
                        this.nodeConfig.conditionNodes[0].childNode = this.nodeConfig.childNode
                    }
                }
                this.$emit("update:nodeConfig", this.nodeConfig.conditionNodes[0].childNode);
            }
        },
        reData(data, addData) {
            if (!data.childNode) {
                data.childNode = addData
            } else {
                this.reData(data.childNode, addData)
            }
        },
        setPerson(priorityLevel) {
            var { type } = this.nodeConfig;
            if (type == 0) {
                this.$store.commit('setPromoter', true)
                this.$store.commit('setFlowPermission', {
                    value: this.flowPermission,
                    flag: false,
                    id: this._uid
                })
            } else if (type == 1) {
                this.$store.commit('setApprover', true)
                this.$store.commit('setApproverConfig', {
                    value: {
                        ...JSON.parse(JSON.stringify(this.nodeConfig)),
                        ...{ settype: this.nodeConfig.settype ? this.nodeConfig.settype : 1 }
                    },
                    flag: false,
                    id: this._uid
                })
            } else if (type == 2) {
                this.$store.commit('setCopyer', true)
                this.$store.commit('setCopyerConfig', {
                    value: JSON.parse(JSON.stringify(this.nodeConfig)),
                    flag: false,
                    id: this._uid
                })
            } else {
                this.$store.commit('setCondition', true)
                this.$store.commit('setConditionsConfig', {
                    value: JSON.parse(JSON.stringify(this.nodeConfig)),
                    priorityLevel,
                    flag: false,
                    id: this._uid
                })
            }
        },
        arrTransfer(index, type = 1) {//向左-1,向右1
            this.nodeConfig.conditionNodes[index] = this.nodeConfig.conditionNodes.splice(index + type, 1, this.nodeConfig.conditionNodes[index])[0];
            this.nodeConfig.conditionNodes.map((item, index) => {
                item.priorityLevel = index + 1
            })
            this.$emit("update:nodeConfig", this.nodeConfig);
        },
        resetConditionNodesErr() {
            for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
                this.nodeConfig.conditionNodes[i].error = $func.conditionStr(this.nodeConfig, i) == "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1
            }
        },
    },
})
Vue.component('addNode', {
    template: `
    <div class="add-node-btn-box">
        <div class="add-node-btn">
            <el-popover placement="right-start" v-model="visible">
                <div class="add-node-popover-body">
                    <a class="add-node-popover-item approver" @click="addType(1)">
                        <div class="item-wrapper">
                            <span class="iconfont"></span>
                        </div>
                        <p>审批人</p>
                    </a>
                    <a class="add-node-popover-item notifier" @click="addType(2)">
                        <div class="item-wrapper">
                            <span class="iconfont"></span>
                        </div>
                        <p>抄送人</p>
                    </a>
                    <a class="add-node-popover-item condition" @click="addType(4)">
                        <div class="item-wrapper">
                            <span class="iconfont"></span>
                        </div>
                        <p>条件分支</p>
                    </a>
                </div>
                <button class="btn" type="button" slot="reference">
                    <span class="iconfont"></span>
                </button>
            </el-popover>
        </div>
    </div>
    `,
    props: ['childNodeP'],
    data() {
        return {
            visible: false
        }
    },
    store,
    methods: {
        addType(type) {
            this.visible = false;
            if (type != 4) {
                let data;
                if (type == 1) {
                    data = {
                        "nodeName": "审批人",
                        "approval_config_id": "",//id
                        "current_node_approver": {},//条件
                        "care_of": false,//允许审批人转交
                        "children_node": [],//子节点id
                        "group_node": [],//父节点id
                        "isRoutingRoot": 0, //是否底层
                        "error": true,//校验
                        "type": 1,//节点类型  1审批 2抄送 3条件 4路由
                        "settype": 1,//审批人设置 1指定成员  2发起人自选 3发起人自己
                        "selectMode": 0,//审批人数 1.选一个  2.选多个
                        "selectRange": 0,//选择范围 1.指定成员 2.指定角色
                        "examineMode": 1,//多人审批时采用的审批方式 1会签 2或签
                        "childNode": this.childNodeP,//子节点
                        "nodeUserList": []//操作人
                    }
                } else if (type == 2) {
                    data = {
                        "nodeName": "抄送人",
                        "approval_config_id": "",//id
                        "current_node_approver": {},//节点类型
                        "care_of": "false",//允许审批人转交
                        "children_node": [],//子节点id
                        "group_node": [],//父节点id
                        "isRoutingRoot": 0, //是否底层
                        "examineMode":1,
                        "type": 2,
                        "childNode": this.childNodeP,
                        "nodeUserList": []
                    }
                }
                this.$emit("update:childNodeP", data)
            } else {
                this.$emit("update:childNodeP", {
                    "nodeName": "路由",
                    "approval_config_id": "",//id
                    "current_node_approver": "",//节点类型
                    "care_of": "false",//允许审批人转交
                    "children_node": [],//子节点id
                    "group_node": [],//父节点id
                    "isRoutingRoot": 0, //是否底层
                    "type": 4,
                    "childNode": {},
                    "conditionNodes": [{
                        "nodeName": "条件1",
                        "approval_config_id": "",//id
                        "current_node_approver": "",//节点类型
                        "care_of": "false",//允许审批人转交
                        "children_node": [],//子节点id
                        "group_node": [],//父节点id
                        "isRoutingRoot": 0, //是否底层
                        "error": true,
                        "type": 3,
                        "priorityLevel": 1,
                        "conditionList": [],
                        "nodeUserList": [],
                        "childNode": this.childNodeP,
                    }, {
                        "nodeName": "条件2",
                        "approval_config_id": "",//id
                        "current_node_approver": "",//节点类型
                        "care_of": "false",//允许审批人转交
                        "children_node": [],//子节点id
                        "group_node": [],//父节点id
                        "isRoutingRoot": 0, //是否底层
                        "type": 3,
                        "priorityLevel": 2,
                        "conditionList": [],
                        "nodeUserList": [],
                        "childNode": {}
                    }]
                })
            }
        }
    },
})
// 待选区域
Vue.component('selectBox', {
    template: `
    <ul class="select-box">
    <template v-for="(elem,index) in list" :key="index">
      <template v-if="elem.type === 'role'">
        <li v-for="item in elem.data" :key="item.roleId" 
          class="check_box"
          :class="{active: elem.isActive && elem.isActive(item), not: elem.not}" 
          @click="elem.change(item)">
          <a :title="item.description" :class="{active: elem.isActiveItem && elem.isActiveItem(item)}">
            <img src="./dataFlow/image/icon_role.png">{{item.roleName}}
          </a>
        </li>
      </template>
      <template v-if="elem.type === 'department'">
        <li v-for="item in elem.data" :key="item.id" class="check_box" :class="{not: !elem.isDepartment}">
          <a v-if="elem.isDepartment" 
            :class="elem.isActive(item) && 'active'" 
            @click="elem.change(item)">
              <img src="./dataFlow/image/icon_file.png">{{item.departmentName}}</a>
          <a v-else><img src="./dataFlow/image/icon_file.png">{{item.departmentName}}</a>
          <i @click="elem.next(item)">下级</i>
        </li>
      </template>
      <template v-if="elem.type === 'employee'">
        <li v-for="item in elem.data" :key="item.id" class="check_box">
            <a :class="elem.isActive(item) && 'active'" 
              @click="elem.change(item)" 
              :title="item.departmentNames">
              <img src="./dataFlow/image/icon_people.png">{{item.employeeName}}
            </a>
        </li>
      </template>
    </template>
  </ul>
    `,
    props: {
        list: {
            type: Array,
            default: () => []
        }
    },
})
// 已选区域
Vue.component('selectResult', {
    template: `
    <div class="select-result l">
    <p class="clear">已选（{{total}}）
        <a @click="$emit('del')">清空</a>
    </p>
    <ul>
        <template v-for="({type, data, cancel},index) in list" :key="index">
          <template v-if="type === 'role'">
            <li v-for="item in data" :key="item.roleId">
                <img src="./dataFlow/image/icon_role.png">
                <span>{{item.roleName}}</span>
                <img src="./dataFlow/image/cancel.png" @click="cancel(item)">
            </li>
          </template>
          <template v-if="type === 'department'">
            <li v-for="item in data" :key="item.id">
                <img src="./dataFlow/image/icon_file.png">
                <span>{{item.departmentName}}</span>
                <img src="./dataFlow/image/cancel.png" @click="cancel(item)">
            </li>
          </template>
          <template v-if="type === 'employee'">
            <li v-for="item in data" :key="item.id">
                <img src="./dataFlow/image/icon_people.png">
                <span>{{item.employeeName}}</span>
                <img src="./dataFlow/image/cancel.png" @click="cancel(item)">
            </li>
          </template>
        </template>
    </ul>
  </div>
    `,
    props: {
        total: {
            type: Number,
            default: 0
        },
        list: {
            type: Array,
            default: () => [{ type: 'role', data: [], cancel: function () { } }]
        }
    },
})
/**
 * 对话框
 */
//选择成员
Vue.component('employeesDialog', {
    template: `
    <el-dialog title="选择成员" :visible.sync="visibleDialog" width="600px" append-to-body class="promoter_person">
    <div class="person_body clear">
      <div class="person_tree l">
        <input type="text" placeholder="搜索成员" v-model="searchVal" @input="getDebounceData($event)">
        <p class="ellipsis tree_nav" v-if="!searchVal">
          <span @click="getDepartmentList(0)" class="ellipsis">{{ Enterprise_Name }}</span>
          <span v-for="(item, index) in departments.titleDepartments" class="ellipsis" :key="index + 'a'"
            @click="getDepartmentList(item.id)">{{ item.departmentName }}</span>
        </p>
        <select-box :list="list"></select-box>
      </div>
      <select-result :total="total" @del="delList" :list="resList" ></select-result>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:visible', false)">取 消</el-button>
      <el-button type="primary" @click="saveDialog">确 定</el-button>
    </span>
  </el-dialog>
    `,
    props: ['visible', 'data', 'isDepartment'],
    data() {
        return {
            checkedDepartmentList: [],
            checkedEmployessList: [],
        }
    },
    mixins: [mixins],
    computed: {
        Enterprise_Name() {
            return this.$store.state.Enterprise_Name;
        },
        total() {
            return this.checkedDepartmentList.length + this.checkedEmployessList.length
        },
        list() {//这是处理可选人员的数组
            return [{
                isDepartment: this.isDepartment,
                type: 'department',
                data: this.departments.childDepartments,
                isActive: (item) => $func.toggleClass(this.checkedDepartmentList, item),
                change: (item) => $func.toChecked(this.checkedDepartmentList, item),
                next: (item) => this.getDepartmentList(item.id)
            }, {
                type: 'employee',
                data: this.departments.employees,
                isActive: (item) => $func.toggleClass(this.checkedEmployessList, item),
                change: (item) => $func.toChecked(this.checkedEmployessList, item),
            }]
        },
        resList() {
            let data = [{
                type: 'employee',
                data: this.checkedEmployessList,
                cancel: (item) => $func.removeEle(this.checkedEmployessList, item)
            }]
            if (this.isDepartment) {
                data.unshift({
                    type: 'department',
                    data: this.checkedDepartmentList,
                    cancel: (item) => $func.removeEle(this.checkedDepartmentList, item)
                })
            }
            return data
        }
    },
    watch: {
        visible(val) {
            this.visibleDialog = this.visible
            if (val) {
                this.getDepartmentList();
                this.searchVal = "";
                this.checkedEmployessList = this.data.filter(item => item.type === 1).map(({ name, targetId }) => ({
                    employeeName: name,
                    id: targetId
                }));
                this.checkedDepartmentList = this.data.filter(item => item.type === 3).map(({ name, targetId }) => ({
                    departmentName: name,
                    id: targetId
                }));
            }
        },
        visibleDialog(val) {
            this.$emit('update:visible', val)
        }
    },
    methods: {
        saveDialog() {
            let checkedList = [...this.checkedDepartmentList, ...this.checkedEmployessList].map(item => ({
                type: item.employeeName ? 1 : 3,
                targetId: item.id,
                name: item.employeeName || item.departmentName
            }))
            this.$emit('change', checkedList)
        },
        delList() {
            this.checkedDepartmentList = [];
            this.checkedEmployessList = []
        }
    },
})
//选择角色成员
Vue.component('employeesRoleDialog', {
    template: `
    <el-dialog title="选择成员" :visible.sync="visibleDialog" width="600px" append-to-body class="promoter_person">
      <div class="person_body clear">
          <div class="person_tree l">
              <input type="text" placeholder="搜索成员" v-model="searchVal" @input="getDebounceData($event,activeName)">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="组织架构" name="1"></el-tab-pane>
                  <el-tab-pane label="角色列表" name="2"></el-tab-pane>
              </el-tabs>
              <p class="ellipsis tree_nav" v-if="activeName==1&&!searchVal">
                  <span @click="getDepartmentList(0)" class="ellipsis">{{Enterprise_Name}}</span>
                  <span v-for="(item,index) in departments.titleDepartments" class="ellipsis" 
                  :key="index+'a'" @click="getDepartmentList(item.id)">{{item.departmentName}}</span>   
              </p>
              <select-box :list="list" style="height: 360px;"></select-box>
          </div>
          <select-result :total="total" @del="delList" :list="resList"></select-result>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="$emit('update:visible',false)">取 消</el-button>
          <el-button type="primary" @click="saveDialog">确 定</el-button>
      </span>
  </el-dialog>
    `,
    props: ['visible', 'data', 'isDepartment'],
    data() {
        return {
            checkedRoleList: [],
            checkedEmployessList: [],
            checkedDepartmentList: []
        }
    },
    mixins: [mixins],
    computed: {
        Enterprise_Name() {
            return this.$store.state.Enterprise_Name;
        },
        total() {
            return this.checkedEmployessList.length + this.checkedRoleList.length + this.checkedDepartmentList.length
        },
        list() {
            if (this.activeName === '2') {
                return [{
                    type: 'role',
                    not: false,
                    data: this.roles,
                    isActiveItem: (item) => $func.toggleClass(this.checkedRoleList, item, 'roleId'),
                    change: (item) => $func.toChecked(this.checkedRoleList, item, 'roleId')
                }]
            } else {
                return [{
                    isDepartment: this.isDepartment,
                    type: 'department',
                    data: this.departments.childDepartments,
                    isActive: (item) => $func.toggleClass(this.checkedDepartmentList, item),
                    change: (item) => $func.toChecked(this.checkedDepartmentList, item),
                    next: (item) => this.getDepartmentList(item.id)
                }, {
                    type: 'employee',
                    data: this.departments.employees,
                    isActive: (item) => $func.toggleClass(this.checkedEmployessList, item),
                    change: (item) => $func.toChecked(this.checkedEmployessList, item),
                }]
            }
        },
        resList() {
            let data = [{
                type: 'role',
                data: this.checkedRoleList,
                cancel: (item) => $func.removeEle(this.checkedRoleList, item, 'roleId')
            }, {
                type: 'employee',
                data: this.checkedEmployessList,
                cancel: (item) => $func.removeEle(this.checkedEmployessList, item)
            }]
            if (this.isDepartment) {
                data.splice(1, 0, {
                    type: 'department',
                    data: this.checkedDepartmentList,
                    cancel: (item) => $func.removeEle(this.checkedDepartmentList, item)
                })
            }
            return data
        }
    },
    watch: {
        visible(val) {
            this.visibleDialog = this.visible
            if (val) {
                this.activeName = "1";
                this.getDepartmentList();
                this.searchVal = "";
                this.checkedEmployessList = this.data.filter(item => item.type === 1).map(({ name, targetId }) => ({
                    employeeName: name,
                    id: targetId
                }));
                this.checkedRoleList = this.data.filter(item => item.type === 2).map(({ name, targetId }) => ({
                    roleName: name,
                    roleId: targetId
                }));
                this.checkedDepartmentList = this.data.filter(item => item.type === 3).map(({ name, targetId }) => ({
                    departmentName: name,
                    id: targetId
                }));
            }
        },
        visibleDialog(val) {
            this.$emit('update:visible', val)
        }
    },
    methods: {
        handleClick() {
            this.searchVal = "";
            this.conditionRoleSearchName = "";
            if (this.activeName == 1) {
                this.getDepartmentList();
            } else {
                this.getRoleList();
            }
        },
        saveDialog() {
            let checkedList = [...this.checkedRoleList, ...this.checkedEmployessList, ...this.checkedDepartmentList].map(item => ({
                type: item.employeeName ? 1 : (item.roleName ? 2 : 3),
                targetId: item.id || item.roleId,
                name: item.employeeName || item.roleName || item.departmentName
            }))
            this.$emit('change', checkedList)
        },
        delList() {
            this.checkedEmployessList = [];
            this.checkedRoleList = [];
            this.checkedDepartmentList = []
        }
    },
})
// 选择角色
Vue.component('roleDialog', {
    template: `
    <el-dialog title="选择角色" :visible.sync="visibleDialog" width="600px" append-to-body class="promoter_person">
      <div class="person_body clear">
          <div class="person_tree l">
              <input type="text" placeholder="搜索角色" v-model="searchVal" @input="getDebounceData($event,2)">
              <select-box :list="list"></select-box>
          </div>
          <select-result :total="total" @del="delList" :list="resList"></select-result>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="$emit('update:visible',false)">取 消</el-button>
          <el-button type="primary" @click="saveDialog">确 定</el-button>
      </span>
  </el-dialog>
    `,
    props: ['visible', 'data'],
    data() {
        return {
            checkedRoleList: [],
        }
    },
    mixins: [mixins],
    computed: {
        total() {
            return this.checkedRoleList.length
        },
        list() {
            return [{
                type: 'role',
                not: true,
                data: this.roles,
                isActive: (item) => $func.toggleClass(this.checkedRoleList, item, 'roleId'),
                change: (item) => this.checkedRoleList = [item]
            }]
        },
        resList() {
            return [{
                type: 'role',
                data: this.checkedRoleList,
                cancel: (item) => $func.removeEle(this.checkedRoleList, item, 'roleId')
            }]
        }
    },
    watch: {
        visible(val) {
            this.visibleDialog = this.visible
            if (val) {
                this.getRoleList();
                this.searchVal = "";
                this.checkedRoleList = this.data.map(({ name, targetId }) => ({
                    roleName: name,
                    roleId: targetId
                }));
            }
        },
        visibleDialog(val) {
            this.$emit('update:visible', val)
        }
    },
    methods: {
        saveDialog() {
            let checkedList = this.checkedRoleList.map(item => ({
                type: 2,
                targetId: item.roleId,
                name: item.roleName
            }))
            this.$emit('change', checkedList)
        },
        delList() {
            this.checkedRoleList = [];
        }
    },
})
//提示
Vue.component('errorDialog', {
    template: `
    <el-dialog title="提示" :visible.sync="visibleDialog">
    <div class="ant-confirm-body">
      <i class="anticon anticon-close-circle" style="color: #f00;"></i>
      <span class="ant-confirm-title">当前无法发布</span>
      <div class="ant-confirm-content">
        <div>
          <p class="error-modal-desc">以下内容不完善，需进行修改</p>
          <div class="error-modal-list">
            <div class="error-modal-item" v-for="(item,index) in list" :key="index">
              <div class="error-modal-item-label">流程设计</div>
              <div class="error-modal-item-content">{{item.name}} 未选择{{item.type}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visibleDialog = false">我知道了</el-button>
      <el-button type="primary" @click="visibleDialog = false">前往修改</el-button>
    </span>
  </el-dialog>
    `,
    props: ['list', 'visible'],
    data() {
        return {
            visibleDialog: false,
        }
    },
    watch: {
        visible(val) {
            this.visibleDialog = val
        },
        visibleDialog(val) {
            this.$emit('update:visible', val)
        }
    },
})
/**
 * 抽屉
 */
//审批人设置
Vue.component('approverDrawer', {
    template: `
    <el-drawer :append-to-body="true" title="审批人设置" :visible.sync="approverDrawer" direction="rtl" class="set_promoter" size="550px" :before-close="saveApprover"> 
        <div class="demo-drawer__content">
            <div class="drawer_content">
                <div class="approver_content">
                    <el-radio-group style="width:100%" v-model="approverConfig.settype" class="clear" @change="changeType">
                        <el-radio :label="1">指定成员</el-radio>
                        <el-radio :label="2">发起人自选</el-radio>
                        <el-radio :label="3">发起人自己</el-radio>
                    </el-radio-group>
                    <el-button type="primary" @click="addApprover" v-if="approverConfig.settype==1">添加/修改成员</el-button>
                    <p class="selected_list" v-if="approverConfig.settype==1">
                        <span v-for="(item,index) in approverConfig.nodeUserList" :key="index">
                            {{item.name}}<img src="./dataFlow/image/add-close1.png" @click="removeApprover(item)">
                        </span>
                        <a v-if="approverConfig.nodeUserList.length!=0" @click="removeApprover">清除</a>
                    </p>
                </div>
                <div class="approver_self" v-if="approverConfig.settype==3">
                    <p>该审批节点设置“发起人自己”后，审批人默认为发起人</p>
                </div>
                <div class="approver_self_select" v-show="approverConfig.settype==2">
                    <el-radio-group v-model="approverConfig.selectMode" style="width: 100%;">
                        <el-radio :label="1">选一个人</el-radio>
                        <el-radio :label="2">选多个人</el-radio>
                    </el-radio-group>
                    <h3>选择范围</h3>
                    <el-radio-group v-model="approverConfig.selectRange" style="width: 100%;" @change="changeRange">
                        <el-radio :label="1">指定成员</el-radio>
                        <el-radio :label="2">指定角色</el-radio>
                    </el-radio-group>
                    <el-button type="primary" @click="addApprover" v-if="approverConfig.selectRange==1">添加/修改成员</el-button>
                    <el-button type="primary" @click="addRoleApprover" v-if="approverConfig.selectRange==2">添加/修改角色</el-button>
                    <p class="selected_list" v-if="approverConfig.selectRange==1||approverConfig.selectRange==2">
                        <span v-for="(item,index) in approverConfig.nodeUserList" :key="index">{{item.name}}
                            <img src="./dataFlow/image/add-close1.png" @click="removeApprover(item)">
                        </span>
                        <a v-if="approverConfig.nodeUserList.length!=0" @click="removeApprover(false)">清除</a>
                    </p>
                </div>
                <div class="approver_some" v-if="(approverConfig.settype==1&&approverConfig.nodeUserList.length>1)||(approverConfig.settype==2&&approverConfig.selectMode==2)">
                    <p>多人审批时采用的审批方式</p>
                    <el-radio-group v-model="approverConfig.examineMode" class="clear">
                        <el-radio :label="1">会签(须所有审批人同意)</el-radio>
                        <br/>
                        <el-radio :label="2">或签(任意审批人同意)</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div class="demo-drawer__footer clear">
                <el-button type="primary" @click="saveApprover">确 定</el-button>
                <el-button @click="closeDrawer">取 消</el-button>
            </div>
            <employees-dialog 
                :visible.sync="approverVisible"
                :data.sync="checkedList"
                @change="sureApprover"
            ></employees-dialog>
            <role-dialog 
                :visible.sync="approverRoleVisible"
                :data.sync="checkedRoleList"
                @change="sureRoleApprover"
            ></role-dialog>
        </div>
    </el-drawer>
    `,
    props: ['directorMaxLevel'],
    data() {
        return {
            approverConfig: {},//审批节点
            approverVisible: false,//成员弹窗
            approverRoleVisible: false,//角色弹窗
            checkedRoleList: [],//存储当前选中的角色
            checkedList: []//存储当前选中的人物
        }
    },
    store,
    computed: {
        approverConfig1() {
            return this.$store.state.approverConfig1;
        },
        approverDrawer() {//控制抽屉是否弹出
            return this.$store.state.approverDrawer;
        }
    },
    watch: {
        '$store.state.approverConfig1'(val) {
            this.approverConfig = val.value;
        },
    },
    methods: {
        changeRange() {//选择范围 1.指定成员 2.指定角色
            //初始化
            this.approverConfig.nodeUserList = [];
            this.current_node_approver = {};
        },
        changeType(val) {//单选 1:指定成员  2:发起人自选  3:发起人自己
            //初始化
            this.approverConfig.nodeUserList = [];
            this.approverConfig.examineMode = 1;
            this.current_node_approver = {};
            if (val == 2) {
                this.approverConfig.selectMode = 1;//审批人数 1.选一个  2.选多个
                this.approverConfig.selectRange = 1;//选择范围 1.指定成员 2.指定角色
            } else {
                this.approverConfig.selectMode = 0;
                this.approverConfig.selectRange = 0;
            }
        },
        addApprover() {//添加/修改成员 弹窗
            this.approverVisible = true;//打开弹窗
            this.checkedList = this.approverConfig.nodeUserList//将当前选择(人员/角色)赋值
        },
        addRoleApprover() {//指定角色 弹窗
            this.approverRoleVisible = true;//打开弹窗
            this.checkedRoleList = this.approverConfig.nodeUserList//当前选择的(人员/角色)赋值
        },
        sureApprover(data) {//添加/修改成员 回调
            this.approverConfig.nodeUserList = data;//更新后值
            this.approverConfig.current_node_approver.nodeUserList = data;//更新后值
            this.approverConfig.current_node_approver.userlist = [];
            for (let i = 0; i < data.length; i++) {
                this.approverConfig.current_node_approver.userlist.push(data[i].targetId)
            }
            this.approverVisible = false;//关闭弹窗
        },
        sureRoleApprover(data) {//指定角色 回到
            this.approverConfig.nodeUserList = data;//更新后值
            this.approverConfig.current_node_approver.nodeUserList = data;//更新后值
            this.approverConfig.current_node_approver.role_id = [];
            for (let i = 0; i < data.length; i++) {
                this.approverConfig.current_node_approver.role_id.push(data[i].targetId)
            }
            this.approverRoleVisible = false;//关闭弹窗
        },
        removeApprover(item) {//删除已选
            if (item) {//清除已选择
                $func.removeEle(this.approverConfig.nodeUserList, item, 'targetId')
                $func.removeEle(this.approverConfig.current_node_approver.nodeUserList, item, 'targetId')
                if (this.approverConfig.selectRange == 1) {//指定成员
                    this.approverConfig.current_node_approver.userlist =
                        this.approverConfig.current_node_approver.userlist.filter(i => i != item.targetId);
                } else if (this.approverConfig.selectRange == 2) {//指定角色
                    this.approverConfig.current_node_approver.role_id = 
                        this.approverConfig.current_node_approver.role_id.filter(i => i != item.targetId);
                }
            } else {//全部清空
                this.approverConfig.nodeUserList = [];
                this.approverConfig.current_node_approver = {}
            }
        },
        saveApprover() {//保存并关闭弹窗
            this.approverConfig.error = !$func.setApproverStr(this.approverConfig)//校验当前是否配置
            this.$store.commit('setApproverConfig', {//更新仓库中的当前选中的审批人节点
                value: this.approverConfig,
                flag: true,
                id: this.approverConfig1.id
            })
            this.$emit("update:nodeConfig", this.approverConfig);//回调并回写
            this.closeDrawer()
        },
        closeDrawer() {//关闭抽屉
            this.$store.commit('setApprover', false)
        }
    },
})
//抄送人设置
Vue.component('copyerDrawer', {
    template: `
    <el-drawer :append-to-body="true" title="抄送人设置" :visible.sync="copyerDrawer" direction="rtl" class="set_copyer" size="550px" :before-close="saveCopyer"> 
        <div class="demo-drawer__content">
            <div class="copyer_content drawer_content">
                <el-button type="primary" @click="addCopyer">添加成员</el-button>
                <p class="selected_list">
                    <span v-for="(item,index) in copyerConfig.nodeUserList" :key="index">{{item.name}}
                        <img src="./dataFlow/image/add-close1.png" @click="removeCopyer(item)">
                    </span>
                    <a v-if="copyerConfig.nodeUserList&&copyerConfig.nodeUserList.length!=0" @click="removeCopyer(false)">清除</a>
                </p>
            </div>
            <div class="demo-drawer__footer clear">
                <el-button type="primary" @click="saveCopyer">确 定</el-button>
                <el-button @click="closeDrawer">取 消</el-button>
            </div>
            <employees-role-dialog 
                :visible.sync="copyerVisible"
                :data.sync="checkedList"
                @change="sureCopyer"
            ></employees-role-dialog>
        </div>
    </el-drawer>
    `,
    data() {
        return {
            copyerConfig: {},//抄送人节点
            copyerVisible: false,//人员角色弹窗
            checkedList: [],//存放当前选中的节点
        }
    },
    store,
    computed: {
        copyerDrawer() {
            return this.$store.state.copyerDrawer;
        },
        copyerConfig1() {
            return this.$store.state.copyerConfig1;
        }
    },
    watch: {
        '$store.state.copyerConfig1'(val) {
            this.copyerConfig = val.value;
        },
    },
    methods: {
        addCopyer() {//打开弹窗
            this.copyerVisible = true;
            this.checkedList = this.copyerConfig.nodeUserList
        },
        sureCopyer(data) {//保存回写
            this.copyerConfig.nodeUserList = data;
            this.copyerConfig.current_node_approver = {};
            this.copyerConfig.current_node_approver.nodeUserList = data;           
            for (let i = 0; i < data.length; i++) {
                if (data[i].type == 1) {//成员
                    if (!this.copyerConfig.current_node_approver.hasOwnProperty('userlist')) {
                        this.copyerConfig.current_node_approver.userlist = []
                    }
                    this.copyerConfig.current_node_approver.userlist.push(data[i].targetId)
                } else if (data[i].type == 2) {//角色
                    if (!this.copyerConfig.current_node_approver.hasOwnProperty('role_id')) {
                        this.copyerConfig.current_node_approver.role_id = []
                    }
                    this.copyerConfig.current_node_approver.role_id.push(data[i].targetId)
                }
            }
            this.copyerVisible = false;
        },
        removeCopyer(item){//删除
            if (item) {//清除已选择
                $func.removeEle(this.copyerConfig.nodeUserList,item,'targetId')
                $func.removeEle(this.copyerConfig.current_node_approver.nodeUserList,item,'targetId')
                if (item.type == 1) {//指定成员
                    this.copyerConfig.current_node_approver.userlist = 
                        this.copyerConfig.current_node_approver.userlist.filter(i => i != item.targetId);
                } else if (item.type == 2) {//指定角色
                    this.copyerConfig.current_node_approver.role_id = 
                        this.copyerConfig.current_node_approver.role_id.filter(i => i != item.targetId);
                }
            } else {//全部清空
                this.copyerConfig.nodeUserList = [];
                this.copyerConfig.current_node_approver = {}
            }
        },
        saveCopyer() {//保存并关闭弹窗
            this.copyerConfig.error = !$func.copyerStr(this.copyerConfig);
            this.$store.commit('setCopyerConfig', {
                value: this.copyerConfig,
                flag: true,
                id: this.copyerConfig1.id
            });
            this.closeDrawer();
        },
        closeDrawer() {//关闭抽屉
            this.$store.commit('setCopyer', false)
        },
    },
})
//发起人设置
Vue.component('promoterDrawer', {
    template: `
    <el-drawer :append-to-body="true" title="发起人" :visible.sync="promoterDrawer" direction="rtl" class="set_promoter" size="550px" :before-close="savePromoter"> 
        <div class="demo-drawer__content">
            <div class="promoter_content drawer_content">
                <p>{{$func.arrToStr(flowPermission)?$func.arrToStr(flowPermission):'所有人'}}</p>
                <el-button type="primary" @click="addPromoter">添加/修改发起人</el-button>
            </div>
            <div class="demo-drawer__footer clear">
                <el-button type="primary" @click="savePromoter">确 定</el-button>
                <el-button @click="closeDrawer">取 消</el-button>
            </div>
            <employees-dialog 
                :is-department="true"
                :visible.sync="promoterVisible"
                :data.sync="checkedList"
                @change="surePromoter"
            ></employees-dialog>
        </div>
    </el-drawer>
    `,
    data() {
        return {
            flowPermission: [],
            promoterVisible: false,
            checkedList: [],
        }
    },
    store,
    computed: {
        promoterDrawer() {
            return this.$store.state.promoterDrawer;
        },
        flowPermission1() {
            return this.$store.state.flowPermission1;
        }
    },
    watch: {
        '$store.state.flowPermission1'(val) {
            this.flowPermission = val.value
        },
    },
    methods: {
        addPromoter() {
            this.checkedList = this.flowPermission
            this.promoterVisible = true;
        },
        surePromoter(data) {
            this.flowPermission = data;
            this.promoterVisible = false;
        },
        savePromoter() {
            this.$store.commit('setFlowPermission', {
                value: this.flowPermission,
                flag: true,
                id: this.flowPermission1.id
            })
            this.closeDrawer()
        },
        closeDrawer() {
            this.$store.commit('setPromoter', false)
        }
    },
})
//条件设置
Vue.component('conditionDrawer', {
    template: `
    <el-drawer :append-to-body="true" title="条件设置" :visible.sync="conditionDrawer" direction="rtl" class="condition_copyer" size="550px" :before-close="saveCondition"> 
        <select v-model="conditionConfig.priorityLevel" class="priority_level">
            <option v-for="item in conditionsConfig.conditionNodes.length" :value="item" :key="item">优先级{{item}}</option>
        </select>
        <div class="demo-drawer__content">
            <div class="condition_content drawer_content">
                <p class="tip">当审批单同时满足以下条件时进入此流程</p>
                <ul>
                    <li v-for="(item,index) in conditionConfig.conditionList" :key="index">
                        <span class="ellipsis">{{item.type==1?'发起人':item.showName}}：</span>
                        <div v-if="item.type==1">
                            <p :class="conditionConfig.nodeUserList.length > 0?'selected_list':''" @click.self="addConditionRole" style="cursor:text">
                                <span v-for="(item1,index1) in conditionConfig.nodeUserList" :key="index1">
                                    {{item1.name}}<img src="./dataFlow/image/add-close1.png" @click="$func.removeEle(conditionConfig.nodeUserList,item1,'targetId')">
                                </span>
                                <input type="text" placeholder="请选择具体人员/角色/部门" v-if="conditionConfig.nodeUserList.length == 0" @click="addConditionRole">
                            </p>
                        </div>
                        <div v-else-if="item.columnType == 'String' && item.showType == 'checkBox'">
                            <p class="check_box">
                                <a :class="$func.toggleStrClass(item,item1.key)&&'active'" @click="toStrChecked(item,item1.key)"
                                v-for="(item1,index1) in JSON.parse(item.fixedDownBoxValue)" :key="index1">{{item1.value}}</a>
                            </p>
                        </div>
                        <div v-else>
                            <p>
                                <select v-model="item.optType" :style="'width:'+(item.optType==6?370:100)+'px'" @change="changeOptType(item)">
                                    <option value="1">小于</option>
                                    <option value="2">大于</option>
                                    <option value="3">小于等于</option>
                                    <option value="4">等于</option>
                                    <option value="5">大于等于</option>
                                    <option value="6">介于两个数之间</option>
                                </select>
                                <input v-if="item.optType!=6" type="text" :placeholder="'请输入'+item.showName" v-enter-number="2" v-model="item.zdy1">
                            </p>
                            <p v-if="item.optType==6">
                                <input type="text" style="width:75px;" class="mr_10" v-enter-number="2" v-model="item.zdy1">
                                <select style="width:60px;" v-model="item.opt1">
                                    <option value="<">&lt;</option>
                                    <option value="≤">≤</option>
                                </select>
                                <span class="ellipsis" style="display:inline-block;width:60px;vertical-align: text-bottom;">{{item.showName}}</span>
                                <select style="width:60px;" class="ml_10" v-model="item.opt2">
                                    <option value="<">&lt;</option>
                                    <option value="≤">≤</option>
                                </select>
                                <input type="text" style="width:75px;" v-enter-number="2" v-model="item.zdy2">
                            </p>
                        </div>
                        <a v-if="item.type==1" @click="conditionConfig.nodeUserList= [];$func.removeEle(conditionConfig.conditionList,item,'columnId')">删除</a>
                        <a v-if="item.type==2" @click="$func.removeEle(conditionConfig.conditionList,item,'columnId')">删除</a>
                    </li>
                </ul>
                <el-button type="primary" @click="addCondition">添加条件</el-button>
                <el-dialog title="选择条件" :visible.sync="conditionVisible" width="480px" append-to-body class="condition_list">
                    <p>请选择用来区分审批流程的条件字段</p>
                    <p class="check_box">
                        <a :class="$func.toggleClass(conditionList,{columnId:0},'columnId')&&'active'" @click="$func.toChecked(conditionList,{columnId:0},'columnId')">发起人</a>
                        <a v-for="(item,index) in conditions" :key="index" :class="$func.toggleClass(conditionList,item,'columnId')&&'active'" 
                        @click="$func.toChecked(conditionList,item,'columnId')">{{item.showName}}</a>
                    </p>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="conditionVisible = false">取 消</el-button>
                        <el-button type="primary" @click="sureCondition">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
            <employees-role-dialog 
                :visible.sync="conditionRoleVisible"
                :data.sync="checkedList"
                @change="sureConditionRole"
                :isDepartment="true"
            ></employees-role-dialog>
            <div class="demo-drawer__footer clear">
                <el-button type="primary" @click="saveCondition">确 定</el-button>
                <el-button @click="$store.commit('setCondition',false)">取 消</el-button>
            </div>
        </div>
    </el-drawer>
    `,
    data() {
        return {
            conditionVisible: false,
            conditionsConfig: {
                conditionNodes: [],
            },
            conditionConfig: {},
            PriorityLevel: "",
            conditions: [],
            conditionList: [],
            checkedList: [],
            conditionRoleVisible: false,
        }
    },
    store,
    computed: {
        tableId() {
            return this.$store.state.tableId;
        },
        conditionsConfig1() {
            return this.$store.state.conditionsConfig1;
        },
        conditionDrawer() {
            return this.$store.state.conditionDrawer;
        }
    },
    watch: {
        '$store.state.conditionsConfig1'(val) {
            this.conditionsConfig = val.value;
            console.log(val);
            this.PriorityLevel = val.priorityLevel
            this.conditionConfig = val.priorityLevel
                ? this.conditionsConfig.conditionNodes[val.priorityLevel - 1]
                : { nodeUserList: [], conditionList: [] }
        },
    },
    methods: {
        changeOptType(item) {
            if (item.optType == 1) {
                item.zdy1 = 2;
            } else {
                item.zdy1 = 1;
                item.zdy2 = 2;
            }
        },
        toStrChecked(item, key) {
            let a = item.zdy1 ? item.zdy1.split(",") : []
            var isIncludes = $func.toggleStrClass(item, key);
            if (!isIncludes) {
                a.push(key)
                item.zdy1 = a.toString()
            } else {
                this.removeStrEle(item, key);
            }
        },
        removeStrEle(item, key) {
            let a = item.zdy1 ? item.zdy1.split(",") : []
            var includesIndex;
            a.map((item, index) => {
                if (item == key) {
                    includesIndex = index
                }
            });
            a.splice(includesIndex, 1);
            item.zdy1 = a.toString()
        },
        async addCondition() {
            this.conditionList = [];
            this.conditionVisible = true;
            $.ajax({
                url: './json/conditions.json',
                type: 'GET',
                data: { tableId: this.tableId },
                success: ({ data }) => {
                    this.conditions = data;
                    if (this.conditionConfig.conditionList) {
                        for (var i = 0; i < this.conditionConfig.conditionList.length; i++) {
                            var { columnId } = this.conditionConfig.conditionList[i]
                            if (columnId == 0) {
                                this.conditionList.push({ columnId: 0 })
                            } else {
                                this.conditionList.push(this.conditions.filter(item => item.columnId == columnId)[0])
                            }
                        }
                    }
                },
                dataType: 'json'
            })
        },
        sureCondition() {
            //1.弹窗有，外面无+
            //2.弹窗有，外面有不变
            for (var i = 0; i < this.conditionList.length; i++) {
                var { columnId, showName, columnName, showType, columnType, fixedDownBoxValue } = this.conditionList[i];
                if ($func.toggleClass(this.conditionConfig.conditionList, this.conditionList[i], "columnId")) {
                    continue;
                }
                if (columnId == 0) {
                    this.conditionConfig.nodeUserList == [];
                    this.conditionConfig.conditionList.push({
                        "type": 1,
                        columnId,
                        "showName": '发起人'
                    });
                } else {
                    if (columnType == "Double") {
                        this.conditionConfig.conditionList.push({
                            showType,
                            columnId,
                            "type": 2,
                            showName,
                            "optType": "1",
                            "zdy1": "2",
                            "opt1": "<",
                            "zdy2": "",
                            "opt2": "<",
                            "columnDbname": columnName,
                            columnType,
                        })
                    } else if (columnType == "String" && showType == "checkBox") {
                        this.conditionConfig.conditionList.push({
                            showType,
                            columnId,
                            "type": 2,
                            showName,
                            "zdy1": "",
                            "columnDbname": columnName,
                            columnType,
                            fixedDownBoxValue
                        })
                    }
                }
            }
            //3.弹窗无，外面有-
            for (let i = this.conditionConfig.conditionList.length - 1; i >= 0; i--) {
                if (!$func.toggleClass(this.conditionList, this.conditionConfig.conditionList[i], "columnId")) {
                    this.conditionConfig.conditionList.splice(i, 1);
                }
            }
            this.conditionConfig.conditionList.sort(function (a, b) { return a.columnId - b.columnId; });
            this.conditionVisible = false;
        },
        saveCondition() {
            this.$store.commit('setCondition', false);
            var a = this.conditionsConfig.conditionNodes.splice(this.PriorityLevel - 1, 1)//截取旧下标
            this.conditionsConfig.conditionNodes.splice(this.conditionConfig.priorityLevel - 1, 0, a[0])//填充新下标
            this.conditionsConfig.conditionNodes.map((item, index) => {
                console.log(item);
                item.priorityLevel = index + 1
            });
            for (var i = 0; i < this.conditionsConfig.conditionNodes.length; i++) {
                this.conditionsConfig.conditionNodes[i].error = $func.conditionStr(this.conditionsConfig, i) == "请设置条件" && i != this.conditionsConfig.conditionNodes.length - 1
            }
            this.$store.commit('setConditionsConfig', {
                value: this.conditionsConfig,
                flag: true,
                id: this.conditionsConfig1.id
            });
        },
        addConditionRole() {
            this.conditionRoleVisible = true;
            this.checkedList = this.conditionConfig.nodeUserList
        },
        sureConditionRole(data) {
            this.conditionConfig.nodeUserList = data;
            this.conditionRoleVisible = false;
        },
    },
})
